<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		<li class="fa fa-remove"></li>
	</button>
	<h4 class="modal-title">标注设置位置</h4>
</div>

<div class="modal-body">

	<input type="hidden" id="id" name="id" value="${org.id}" /> 
	<input type='hidden' value="${CSRFToken}" id='csrftoken' />


	<div class="row">
		<div class="col-md-1"></div>
		<div id="bl-img-div" class="col-md-10" style="width:720px; height: 475px; background-size: contain; background-repeat: no-repeat; position: relative; padding: 0px; background-image: url(${basePath}${org.images})">
			<!-- <div id="div1" style="width:30px; height:30px; background-color:#ccc; position:absolute;"></div> -->
		</div>
		
		<div class="col-md-1"></div>
	</div>
	
	<div class="row">

		<div class="box-footer">
			<div class="pull-left">
				<button type="button" class="btn btn-default" data-btn-type="add_device">
					<i class="fa fa-pencil"></i> 添加采集器
				</button>
			</div>
			<div class="pull-left">
				<button type="button" class="btn btn-default" data-btn-type="add_camera">
					<i class="fa fa-pencil"></i> 添加摄像头
				</button>
			</div>
			<!-- <div class="pull-right">
				<button type="button" class="btn btn-default" data-btn-type="previous">
					<i class="fa fa-pencil"></i> 上一步
				</button>
			</div> -->
			<div class="pull-right">
				<button type="button" class="btn btn-default" data-btn-type="save">
					<i class="fa fa-pencil"></i> 完成
				</button>
			</div>
		</div>

	</div>
</div>

	<script>
	var _x=0,_y=0;//鼠标离控件左上角的相对位置
	var _currDrag;
	var _move=false;//移动标记
	$(function() {
		var target = $("#bl-img-div");
		$("[data-btn-type='add_device']").click(function () {
			addMark(target,1);
        });
		
		$("[data-btn-type='add_camera']").click(function () {
			addMark(target,2);
        });
		
		$("[data-btn-type='save']").click(function () {
			getParamsPosition();
        });
		
		
		$(document).mousemove(function(e){  
	        if(_move){  
	            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置  
	            var y=e.pageY-_y;
	            console.info("+++++++++++++++++++++++++++++++++++++");
	            console.info("e.pageX: " + e.pageX + " _x: " + _x);
	            console.info("e.pageY: " + e.pageY + " _y: " + _y);
	            console.info("x: "+x +" y："+y);
	            console.info("+++++++++++++++++++++++++++++++++++++");
	            $(_currDrag).css({top:y,left:x});//控件新位置
	        }  
	    }).mouseup(function(e){
	    	_move=false;
	    	$(_currDrag).fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
	  });
		
	});
	
	function addMark(target, type){
		var div;
		if(type == 1){
			div = $('<div class="dev-drag">采集器</div>');
		}else{
			div = $('<div class="dev-drag">设备</div>');
		}
		$(div).click(function(){}).mousedown(function(e){
        	_move=true;
	        _x=e.pageX-parseInt($(div).css("left"));  
	        _y=e.pageY-parseInt($(div).css("top"));
	        console.info("-----------------------------------------------");
	        console.info("pageX: "+e.pageX + "  left: "+$(div).css("left"));
	        console.info("pageY: "+e.pageY + "  top: "+$(div).css("top"));
	        console.info("_x: "+ _x);
	        console.info("_y: "+ _y);
	        console.info("-----------------------------------------------");
	        $(div).fadeTo(20, 0.5);
	        _currDrag = div;
	    });
		$(target).append(div);
	}
	
	function getParamsPosition(){
		var orgId = $("#id").val();
		var winId = "showimg";
		var params = new Array();
		var index = 1;
		$("#bl-img-div .dev-drag").each(function(){
			var left = $(this).css("left");
			var top = $(this).css("top");
			var text = $.trim($(this).text());
			var className = "block-" + index;
			params.push({"type": text, "px": left, "py": top});
			index++;
		});
		//alert(JSON.stringify(params));
		if(params.length == 0){
			modals.info("请先添加设备!");
			return;
		}
		console.info(JSON.stringify(params));
		ajaxPost(basePath+'/scene/saveDevice/'+orgId,{"obj":JSON.stringify(params)}, function(data) {
            if(data.success){
            	modals.closeWin(winId);
            }
        });
	}

</script>
